<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="90%"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    title="订单数据"

    @update:visible="updateVisible"
  >
    <!-- 数据表格 -->
    <ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" :selection.sync="selection">
      <template slot="hdThumbUrl" slot-scope="{row}">
        <el-avatar shape="square" :size="50" :src="row.hdThumbUrl"/>
      </template>
      <template slot="action" slot-scope="{row}">
        <el-link type="primary" icon="el-icon-edit" @click="openEdit(row)">详情
        </el-link>
      </template>
    </ele-pro-table>
    <DetailModal
      v-if="detailVisible"
      :id="currentId"
      :visible.sync="detailVisible"
    />
  </el-dialog>
</template>

<script>
import DetailModal from "@/views/operate/data/detail-modal.vue";

export default {
  name: 'DataDetail',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    ID: {
      type: Number,
      default: 0
    }
  },
  components: {DetailModal},
  data() {
    return {
      detailVisible: false,
      currentId: 0,
      // 表格数据接口
      url: '/data/goodsLists',
      // 表格列配置
      columns: [
        {
          prop: 'goods_id',
          label: '商品id',
          minWidth: 50,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: 'goodsName',
          label: '商品名称',
          minWidth: 80,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          columnKey: 'hdThumbUrl',
          label: '图片',
          width: 100,
          align: 'center',
          resizable: false,
          slot: 'hdThumbUrl',
        },
        {
          prop: 'shop_num',
          label: '店铺编号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 40,
        },
        {
          prop: 'shop_name',
          label: '店铺名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
        },
        {
          prop: 'goodsUv',
          label: '商品访客数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'goodsPv',
          label: '商品浏览量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'payOrdrAmt',
          label: '成交金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'goodsFavCnt',
          label: '收藏数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'payOrdrCnt',
          label: '成交订单数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'payOrdrGoodsQty',
          label: '成交件数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
        },
        {
          prop: 'payOrdrUsrCnt',
          label: '成交买家数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
        },
        {
          prop: 'day',
          label: '日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 80,
          align: 'center',
          resizable: false,
          slot: 'action',
        }
      ],
      // 表格搜索条件
      where: {'id': this.ID},
      // 表格选中数据
      selection: [],
    };
  },
  watch: {
    ID(newValue) {
      this.where.id = newValue
      this.$refs.table.reload({where: this.where});
    },

  },
  mounted() {

  },
  methods: {
    openEdit(row) {
      this.currentId = row?.id || ''
      this.detailVisible = true
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
  }
}
</script>

<style scoped></style>
